* {
  margin: 0;
  padding: 0;
}
//通用样式
.yellowBtn{
  font-weight:bold!important;
  background:#f8d95e!important;
  border-color:#f8d95e!important;
}
.grayBtn{
  font-weight:bold!important;
  background:#cccccc!important;
  border-color:#cccccc!important;
  span{
    color: #6E7274;
  }
}
//登录页面样式
.login-page {
  .text-error {
    position: relative;
    height: 0;
    width: 100%;
    text-align: left;
    color: red;
    font-size: 12px;
    padding: 0 6px;
  }
  .bottomText-b {
    padding: 20px;
    text-align: center;
    i {
      font-size: 16px;
      color: #a9a9a9;
      margin-bottom: 20px;
      font-weight: bold;
    }
  }
  .subject{
      position: relative;
      display: flex;
      height: auto;
      width: 1540px;
      margin: 68px auto 0;
  }
  .subject-left{
      width: calc(100% - 320px);
      overflow: hidden;
      background-color: #2ec3e3;
      border-radius: 18px 0 0 18px;
  }
  .subject-left-title{
      margin: 55px 56px 0 70px;
      overflow: hidden;
      text-align: left;
      h4{
          color: #112634;
          font-size: 24px;
          letter-spacing: 4px;
      }
      h1{
          font-size: 91px;
          color: #fff;
          float: left;
          display: flex;
          line-height: 1;
      }
      a{
          text-decoration: none;
          display: block;
          float: right;
          width: 226px;
          height: 76px;
          line-height: 76px;
          text-align: center;
          font-weight: bold;
          font-size: 26px;
          background-color: #ffd54c;
          border-radius: 5px;
          margin-top: 10px;
          outline: none;
          color: #000;
          font-weight: bold;
      }
      
  }
  .aa-a{
      height: 240px;
  }
  .subject-left-a{
      display: flex;
      overflow: hidden;
      position: absolute;
      bottom: 303px;
      z-index: 88;
      pointer-events: none;
      .a-img{
          padding-left: 40px;
          box-sizing: border-box;
          img{
              height: 300px;
              margin-top: 120px;
          }
      }
      .a-content{
          width: 375px;
          margin-top: 76px;
          margin-left: 357px;
          text-align: left;
          padding-right: 10px;
          box-sizing: border-box;
          .b-typeface-1{
          font-size: 18px;
          line-height: 1.8em;
          color: #fafdfe;
          margin-bottom: 30px;
          }
          .b-typeface-2{
          font-size: 18px;
          line-height: 1.8em;
          color: #f4e14d;
          }
      }
  }
  .subject-right{
      width: 332px;
      background-color: #f3f3f3;
      border-radius: 0 18px 18px 0px;
      .right-1{
          width: 240px;
          margin: 0 auto;
          margin-top: 30px;//调整logo到上边缘的边距
          overflow: hidden;
        text-align: center;

          .right-1-aa{
            margin-top: 35px;
            text-align: center;
              h3{
                  font-size: 17px;
                  color: #222222;
                  margin-bottom: 20px;
                  text-align: center;
              }
              .login-a{
                  overflow: hidden;
                  height: 144px;
                  margin-top: 10px;
                  .login-input{
                    width: 235px;
                    border-right: none;
                    border-top: none;
                    border-left: none;
                    background-color: #f3f3f3;
                    outline: none;
                    height: 26px;
                    border-bottom: 1px solid #d7dde2;
                  }
                  .login-input:focus{
                    border-bottom: 2px solid #52d4d4;
                  }
                  p{
                    color: #9bb0b9;
                    font-size: 12px;
                    line-height: 15px;
                    float: left;
                  }
                  span{
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background-color: #c7e3e9;
                    display: block;
                    position: relative;
                    top: -39px;
                    left: 206px;
                    .locn_1{
                      position: relative;
                      top: -7px;
                      left: -5px;
                    }
                    .locn_2{
                      position: relative;
                      top: 8px;
                      left: -6px;
                    }
                  }
                  .forget{
                    font-size: 12px;
                    float: right;
                    color: #929292;
                    position: relative;
                    top: -14px;
                    margin-bottom: 22px;
                    a{
                      color: #fbae49;
                      font-size: 12px;
                      text-decoration: none;
                      font-weight: bold;
                    }
                  }
                  .Password{
                    position: relative;
                    top: 17px;
                  }
              }
              .introduce {
                  p{
                  font-size: 12px;
                  line-height: 15px;
                  color: #a7a7a7;
                  }
                  .a{
                    width:100px;
                    display: block;
                    background-color: #2ec3e3;
                    border-color: #2ec3e3;
                    text-decoration: none;
                    color: #ffffff;
                    font-size: 12px;
                    text-align: center;
                    border-radius: 5px;
                    margin: 12px auto;
                  }
              }
          }
      }
    .bottomText{
      font-size: 10px;
      color: #a7a7a7;
      text-align: center;
      position: absolute;
      bottom: 15px;
      right: 45px;
    }
  }
  .yellow{
      width: 1583px;
      height: 300px;
      background-color: #ffd54c;
      position: absolute;
      bottom: 47px;
      left: -23px;
      ul{
          width: 100%;
          height: 290px;
          display: flex;
          margin: 0 auto;
          padding: 0 53px;
          box-sizing: border-box;
          margin-top: 20px;
          justify-content: space-between;
          position: relative;
          &::after {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            top: 41%;
            margin-top: -60px;//调节步骤条横线的位置
            height: 3px;
            background-color: #f2b929;
            border-top: 2px solid rgba(255, 255, 255, 0.6);
          }
          // background: url(../assets/iocn_03.jpg) no-repeat 137px 76px;
          // background-size: 80%;
          li{
              list-style: none;
              overflow: hidden;
              text-align: center;
              padding-top: 12px;
              box-sizing: border-box;
              position: relative;
              min-width: 150px;//防止步骤数字被遮挡
              z-index: 10;
              a{
              text-decoration: none;
              .shadow-a{
                  width: 90px;
                  height: 90px;
                  border-radius: 50%;
                  background-color: #f1b541;
                  margin: 10px auto;
                  margin-bottom: 20px;
                  p{
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                      display: block;
                      background-color: #ffffff;
                      position: relative;
                      bottom: 5px;
                      left: 2px;

                      img{
                          position: relative;
                          top: -12px;
                          width:60px ;
                          height:60px ;
                          //max-width: 80%;
                          //max-height: 80%;
                      }
                      span{
                          width: 30px;
                          height: 30px;
                          display: block;
                          background-color: #2ec3e3;
                          position: relative;
                          border-radius: 50%;
                          color: #ffffff;
                          line-height: 30px;
                          text-align: center;
                          font-size: 18px;
                          top: 30px;
                          left: -22px;
                      }
                  }
              }
              }
          }
        }
      .horn-a{
        left: 3px;
        bottom: -26px;
        position:absolute;
        z-index: 0;
      }
      .horn-b{
        transform: rotate(182deg);
        z-index: 0;
        position: absolute;
        right: 0;
        top: -26px;
      }
  }
  .describe{
      color: #7d6c49;
      font-size: 18px;
      line-height: 1.6em;
      i{
          font-style:normal;
          color: #2ec3e3;
      }
  }
  .yellow-a{
      height: 423px;
  }
  .errorMsg{
    height: 20px;
    color: red;
    font-size: 10px;
    text-align: left;
  }
  @media screen and (max-width: 1600px) {
    .subject{
      width: 1372px;
      margin: 36px auto 0;
    }

    .aa-a{
      height: 381px;
    }
    .subject-left-a{
      pointer-events: none;//适配时挡住按钮，设置可点击穿透
        .a-content{
          margin-left: 57px;
        }
        .a-img img{
          height: 383px;
        }
        .b-typeface-1{
          font-size: 16px;
          margin-bottom: 30px;
        }
        .b-typeface-2{
          font-size: 16px;
          font-weight: bold;
        }
      }
    .yellow {
      width: calc(100% + 44px);
      height: auto;
      ul{
        margin-top: 20px;
        &::after {
          top:50%
        }
      }
    }
    .subject-left-a {
      bottom: 315px;
    }
    .subject-right .right-1 .right-1-aa {
      margin-top: 30px;
      h3{
        margin-bottom: 5px;
      }
      .login-a{
        margin-top: 10px;
      }
    }
  }
  @media screen and (max-width: 1440px) {
    .logo{
      width: 120px;
    }
    .subject{
      width: 1140px;
      margin: 36px auto 0;
    }
    .subject-left-title {
      h4 {
        font-size: 16px;
      }
    }
    .describe {
      font-size: 12px;
      font-weight: bold;
    }
    .subject-left-a .a-img img {
      height: 280px;
      margin-top: 40px;
    }
    .subject-left-a .a-content {
      margin-top: 30px;
    }
    .subject-left-a .a-content .b-typeface-1,
    .subject-left-a .a-content .b-typeface-2 {
      font-size: 14px;
    }
    .subject-left-a {
      bottom: 240px;//控制左边部分图片到底部距离
      .a-content .b-typeface-1 {
        margin-bottom: 15px;
      }
    }
    .subject-left-title{
      h1 {
        font-size: 50px;
      }
      a{
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        width: 140px;
      }
    }
    .yellow{//控制黄色区域的高度和底部的距离
      height: 240px;
      bottom:40px;
      ul{
        height: auto;
        padding-bottom: 30px;
        &::after {
          top:50%
        }
      }
    }
    .subject-right .right-1 .right-1-aa {
      margin-top: 30px;
      h3{
        margin-bottom: 5px;
      }
      .login-a{
        margin-top: 10px;
      }
    }
    .aa-a {
      height: 170px;
    }
    .bottomText-b {
      i {
        font-size: 12px;
      }
    }

  }
  @media screen and (max-width: 1200px) {//平板
    .subject-right .right-1{
        .right-1-aa .login-a{
          height: 124px;
          margin-top: 5px;
          .login-input{
            height: 20px;
          }
        }
    }
    .logo{
      width: 100px;
    }
    .subject{
      width: 900px;
      margin: 36px auto 0;
    }
    .subject-left-a .a-img img {
      height: 200px;
      margin-top: 80px;
    }
    .subject-right .right-1 {
      width: 250px;
      margin-top: 20px;
    }
    .aa-a {
      height: 48px;
    }
    .subject-left-title {
      margin: 30px;
      h4{
        font-size: 14px;
      }
      h1{
        font-size: 30px;
        margin-top: 10px;
      }
    }
    .subject-left-a .a-img {
      padding-left: 20px;
    }
    .subject-left-a .a-content {
      width: 300px;
      margin-left: 20px;
    }
    .subject-left-a .a-content .b-typeface-1, 
    .subject-left-a .a-content .b-typeface-2 {
      font-size: 12px;
    }
    .subject-left-a .a-content .b-typeface-1 {
      margin-bottom: 10px;  
    }
    .yellow{//控制黄色区域的高度和底部的距离
      height: 180px;
      bottom:32px;
      ul li a .shadow-a{
        width: 60px;
        height: 60px;
        margin-bottom: 5px;
        p{
          width: 100%;
          height: 100%;
          span {
            top: 20px;
            left: -12px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
          }
          img{
            top: -10px;
            width: 40px;
            height: 40px;
          }
        }
      }
    }
    .describe {
      font-size: 12px;
    }
    .yellow ul {
      height: auto;
      padding-bottom: 18px;
      margin-top: 5px;
      &:after{
        top: 58%;
        right: 16%;
      }
    }
    .subject-right .right-1 .right-1-aa {
      margin-top: 20px;
        h3{
          margin-bottom: 10px;
        }
      .right-1-aa .login-a .forget{
        margin-bottom: 0px;
      }
      .introduce .a{
        margin-top: 10px;
      }
    }
    .subject-left-a {
      bottom: 180px;
    }

  }
}

//apply header样式
.header{
  height:80px;
  background:#2dc3e3;
  padding:20px;
  position:relative;
}
.mt90{
  margin-top: 90px;
}
.mt80{
  margin-top: 80px;
}
.mt70{
  margin-top: 70px;
}
.mt60{
  margin-top: 60px;
}
.mt40{
  margin-top: 40px;
}
.mt30{
  margin-top: 30px;
}
.mt10{
  margin-top: 10px;
}
.mt20{
  margin-top: 20px;
}
.fs12{
  font-size: 12px;
}
.fs14{
  font-size: 14px;
}
.fs16{
  font-size: 16px;
}
.lh20{
  line-height: 20px;
}
.lh25{
  line-height: 25px;
}
//apply main样式
.main{
  display: flex;
  width:100%;

  section{
    background:#f3f3f3;
    flex:1;
    width: calc(100% - 320px);
    padding:30px 50px 0px 50px
  }
}

//postion点进去的通用圆角卡片样式
.box{
  width: 95%;
  margin: 10px auto;
  border: 1px solid #dddfe3;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  background: #fff;
  line-height: 30px;
}
.smallBox{
  width: 90%;
  margin: 20px auto 10px;
  border: 1px solid #dddfe3;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  background: #fff;
  line-height: 30px;
}
.viewPDF{
  display: inline-block;
  position: absolute;
  top: -15px;
  left: 22%;
  margin-left: -120px;
  font-size: 14px;
  background: #fff;
  padding: 0 10px;
  cursor: pointer;
  font-weight: bold;
}
.viewPDF u{
  color: blue;
}
.oval{
  margin: 10px 0;
  font-style: italic
}
.score{
  position: absolute;
  top: 30px;
  right: 20px;
  font-size: 12px;
  color: #787677;
}
.subjectTest{
  width: 93%;
  height: auto;
  line-height: 25px;
  .el-image{
    top:10px;
    width: 20px;
  }
}
.required{
  color: red;
}